<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h1>{{name}}}</h1>
    </div>

    <div>{{message}}}</div>

    <script src="../js/vue.js"></script>
    <script>
        //在ES6中不再使用Var来定义变量，而使用let(变量),const（常量）
        //编程范式：声明式编程，只需要告诉（声明）某个地方放什么，并不需要知道中间是怎么做的
        //eg
        //let name="why"  //不使用const,否则无法修改
        //name = "kobe"

        const app = new Vue({  //创建了VUE的实例
            el:"#app",//用于挂载要挂载要管理的元素
            data:{     //定义一些数据
                message:'你好啊，芭芭拉',
                name:'coderwhy'
            }
        })


        //原生JS的做法（编程范式：命令式编程）
        //1.创建DIv元素，设置ID属性
        //2.定义一个变量叫message
        //3.将message放在前面的DIV元素中显示
        //4.修改message的数据：今天天气不错
        //5.将修改后的数据再次替换到DIV元素中
    </script>
</body>
</html>